import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import Excellent from '@/assets/Excellent.svg';
import Medium from '@/assets/Medium.svg';
import Poor from '@/assets/Poor.svg';
import { Carousel } from 'antd';
class Score extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: [],
      showLoading: true,
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps?.data && nextProps.data.length > 0) {
      this.setState(
        {
          info: nextProps.data,
        },
        () => {
          // this.stopLoading();
          new window.Swiper('.swiper', {
            autoplay: true,
            direction: 'vertical',
            height: 30,
            loop: true,
            speed: 1000,
          });
        },
      );
    }
  }

  componentDidMount() {
    // this.stopLoading();
  }

  // stopLoading() {
  //   let timer = setTimeout(() => {
  //     window.clearTimeout(timer);
  //     this.setState({
  //       showLoading: false,
  //     });
  //   }, 3200);
  // }

  render() {
    const { info, showLoading } = this.state;
    return (
      <div className={styles.score}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          综合健康状态
        </div>
        <div className={styles.loading}></div>

        <div className={styles.box}>
          <Carousel autoplay dots={false} autoplaySpeed={1000000}>
            {info &&
              info.map((item, index) => {
                return (
                  <div key={index}>
                    <div className={styles.header}>
                      <div className={styles.imgsList}>
                        {item.value == 1 ? (
                          <img src={Poor} />
                        ) : item.value == 2 ? (
                          <img src={Medium} />
                        ) : (
                          <img src={Excellent} />
                        )}
                      </div>
                      <div className={styles.descName}>{item.station_name}</div>
                    </div>
                    <div className={styles.suggestList}>
                      <div className={styles.titleSu}>评分建议:</div>
                      <div className={styles.con}>{item.suggest}</div>
                    </div>
                    <div className={styles.line}>
                      <div></div>
                    </div>
                    <ul className={styles.detail}>
                      <div className="swiper">
                        <div className="swiper-wrapper">
                          {item.details.map((it, ind) => {
                            return (
                              <li key={ind} className="swiper-slide">
                                <span className={styles.icon}></span>
                                <span className={styles.key_name}>
                                  {it.key_name}
                                </span>
                                <span
                                  className={styles.desc}
                                  style={{
                                    color:
                                      it.value == 4
                                        ? '#50CB74'
                                        : it.value == 2
                                        ? '#FAAD14'
                                        : it.value == 1
                                        ? '#FF535C'
                                        : '',
                                  }}
                                >
                                  {it.desc}
                                </span>
                              </li>
                            );
                          })}
                        </div>
                      </div>
                    </ul>
                  </div>
                );
              })}
          </Carousel>
        </div>
      </div>
    );
  }
}
export default Score;
